<template>
    <div class="wrapper">
      <ul class="list">
        <li v-for="(item,key) in letters"
            :key="item"
            :ref="item"
            @click="cityClick"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
        >{{item}}</li>



      </ul>

    </div>
</template>

<script>
    export default {
        name: "Aside",
      props:{
          cities:Object
      },
      data(){
          return{
            touchStatus:false,
            timer:null,
            startY:0
          }
      },
      updated(){
        this.startY=this.$refs['A'][0].offsetTop;
      },
      computed:{
          letters(){
            const letters=[];
            for(let i in this.cities){
              letters.push(i);
            }
            return letters;
          }
      },
      methods:{
          cityClick(e){
            // console.log(e.target.innerText)
            this.$emit("change",e.target.innerText)
          },
        handleTouchStart(){
            // console.log(111);
          this.touchStatus=true;
        },
        handleTouchMove(e){
          // console.log(222);

          if(this.touchStatus){
            if(this.timer){
              clearTimeout(this.timer);
            }

            this.timer=setTimeout(()=>{
              const startY=this.$refs['A'][0].offsetTop;
              console.log(startY);
              const endY=e.touches[0].clientY-80;
              const index=Math.floor((endY-startY)/20);
              if(index>=0 && index<this.letters.length){
                this.$emit("change",this.letters[index]);
              }
              console.log(index);
            },15)

          }
        },
        handleTouchEnd(){
          // console.log(333);
          this.touchStatus=false;

        },

      }

    }
</script>

<style lang="stylus" scoped>
  .wrapper{
    .list{
      display:flex;
      width:.2rem;
      flex-direction:column;
      position:absolute;
      top:.8rem;
      right:0;
      bottom:0;
      justify-content:center;

      li{
        text-align:center;
        line-height:.2rem;
        font-size:.16rem;
        color:#00bcd4;
      }
    }
  }
</style>
